<script>
export default  {
    data(){
        return{
            treeData:[],
            defaultProps: {
                children: 'children',
                label: 'name',
            }
        }
    },
    mounted() {
        this.getTreeData();
    },
    methods:{
        getTreeData(){
          this.$HttpService.get(`/t-district/findTreeAuth`).then(res=>{
                this.treeData = res;
            })
        },
        handleNodeClick(x){
	        this.$emit('clickNode',x.districtCode,this.treeData)
        },
        renderContent(h, { node, data, store }){
            return (
                <span class="custom-tree-node">
                    <span>{node.label}</span>
                    <span>
                      <i class="el-icon-s-promotion"></i>
                    </span>
                </span>);
        }
    }
}
</script>

<template>
    <div class="dist-out">
        <el-tree :data="treeData" :render-content="renderContent" :props="defaultProps" node-key="districtCode" :default-expanded-keys="['510525000000']" accordion @node-click="handleNodeClick"></el-tree>
    </div>
</template>

<style lang="scss" scoped>
::v-deep .is-current{
    .el-tree-node__content{
        color: #13ce66;
        .el-icon-s-promotion{
            display: inline-block!important;
            position: relative;
            left: 66px;
        }
    }
    .el-tree-node__children{
        .el-tree-node__content {
            color: #606266 !important;
            .el-icon-s-promotion{
                display: none!important;
            }
        }
    }
}

::v-deep .el-icon-s-promotion{
    display: none
}
    .dist-out{

    }
</style>
